import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Spin, message, Steps } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import SearchEmp from '../../components/SearchEmp';

const { Step } = Steps;

@connect(({ addass, loading, publicdata: { empInfo } }) => ({
  loading: loading.models.addass || false,
  empNameList: addass.empNameList,
  assInfo: addass.assInfo,
  empInfo,
  isClear: addass.isClear,
}))
@Form.create()
class BasicForm extends React.Component {
  // 提价数据
  submit = () => {
    const { form, dispatch, empInfo } = this.props;
    form.validateFieldsAndScroll(err => {
      if (!err) {
        dispatch({
          type: 'addass/fetchAssDetail',
          payload: { sendId: empInfo.sendId },
        }).then(response => {
          if (response.success) {
            dispatch({
              type: 'addass/updateModelData',
              payload: { ...empInfo, isClear: false },
            });
            router.push(
              `/customservicemanage/addemployee/addassinfo?sendId=${empInfo.sendId}&custId=${
                empInfo.custId
              }`
            );
          } else {
            message.warning(response.message || '获取人员信息：服务端错误');
          }
        });
      }
    });
  };

  render() {
    const { loading, form, empInfo, isClear } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card>
            <Steps current={0} style={{ marginBottom: 70 }}>
              <Step title="选择人员" />
              <Step title="填写险种信息" />
              <Step title="完成" />
            </Steps>
            <SearchEmp
              params={{ taskSource: 2 }}
              form={form}
              optionKey="sendId"
              isClear={isClear}
            />
            <div style={{ marginTop: '100px', marginBottom: '30px', textAlign: 'center' }}>
              <Button style={{ marginRight: '30px' }} onClick={() => router.goBack()}>
                返回
              </Button>
              <Button type="primary" onClick={this.submit} disabled={!(empInfo && empInfo.sendId)}>
                下一步
              </Button>
            </div>
          </Card>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
